<template>
  <div class="outer">
    <h1>App:{{ count }}</h1>
    <p>person的数据 {{ person.name }}--{{ person.age }}</p>
    <button @click="count++">count++</button>
    <!-- 
      props的使用
        * 作用:主要是为了做父子之间的通信
        * 基础使用:
          - 给子组件标签上 通过属性的方式 传递一些值
          - 在子组件内部需要通过props配置项 接受父组件传递过来的值
          - 我们在子组件中就可以通过实例访问到props的数据
        * props是只读的
          - vue和react一样都是单向数据流(数据的流动方向只能以单向的)
          - 在vue不要尝试修改自己接受的props属性(无论是基本类型还是对象类型),这样是不符合规范的
        * props除了做父传子以外,还可以做子传父
          - 组件自己的数据只能自己内部修改,所以不能在其他组件修改当前组件的数据
          - 可以在当前组件内部书写一个函数,函数的作用是修改当前组件的数据
          - 把函数通过props的方式传递给子组件,子组件可以调用函数并传参,达到向父组件传递数据的目的
        * props的三种接收方式
          - props的写法1:直接数组的方式接收
          - props的写法2:对象形式,可以限制props值的类型
          - props的写法3:对象形式,可以限制props值的类型 必填等各种限制
     -->
    <Header a="1" :count="count" :person="person"></Header>
    <Footer :changeCount="changeCount"></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      count: 0,
      person: {
        name: "张三",
        age: 18,
      },
    };
  },
  methods: {
    changeCount(newCount) {
      this.count = newCount;
    },
  },
};
</script>

<style>
.outer {
  border: 1px solid #000;
}
</style>
